<template>
	<div class="wrap">
		<v-carousel :list="list" :wpTitle="carTitle"></v-carousel>
      <div class="about">
         <div class="subTile">
            <p>{{abouts.title}}</p>
            <span>{{abouts.subTitle}}</span>
         </div>
         <div class="about_box">
            <p v-html="abouts.content"></p>
            <img src="../assets/about_pic.jpg" />
            <p>We would like to spread to everyone <br />
            the " culture of advertising to enrich the lives ".</p>
            <img src="../assets/about_pic2.jpg" height="176" width="321" />
         </div>
      </div>
      <div class="team">
         <div class="subTile">
            <p>{{teams.title}}</p>
            <span>{{teams.subTitle}}</span>
         </div>
         <div class="team_box">
            <ul>
               <li v-for="item in teams.list">
                  <img :src="apiurl+item.picture" />
                  <div class="team_desc" v-html="item.content"></div>
               </li>
            </ul>
         </div>
      </div>
      <div class="contact">
         <div class="subTile">
            <p>Corporate profile</p>
         </div>
         <div class="contact_box" v-html="fsInfo"></div>
      </div>
	</div>
</template>

<script>
import vCarousel from './components/carousel'
export default {
	data() {
   	return {
         list: [],
         carTitle: '',
         abouts: {
            title: '塑身瑜伽馆',
            subTitle: 'Yoga gym',
            content: ''
         },
         teams: {
            title: '',
            subTitle: '',
            list: {
               picture: '',
               content: ''
            }
         },
         fsInfo: '',
   	}
	},
   components: {
      vCarousel
   },
   mounted (){
      let _this = this;

      // ajax获取数据
      this.ajax('?c=msg&ts=ABOUT US&wxapp_skin=', function (res){
         _this.abouts.content = res.data.data.content;
         _this.carTitle = res.data.data.title;
         _this.teams.list = res.data.data2.rslist;
         _this.teams.title = res.data.data2.me.cate_name;
         _this.teams.subTitle = res.data.data2.me.subcate;
         _this.fsInfo = res.data.data3.content;
         _this.list = _this.$store.getters.getCar;
      });
 
   }
}
</script>

<style scoped>
   .about .subTile{text-align: center; margin: 0.2rem auto; overflow: hidden;}
   .about .subTile p{font-size: 0.16rem;}
   .about .subTile span{font-size: 0.12rem;}
   .about .about_box p{margin-bottom: 0.1rem; text-align:left; text-indent:1em;}
   .about .about_box{text-align: center; padding:0 .1rem;}
   .about .about_box img{max-width: 100%;}
   .team .subTile{margin: 0.2rem auto; text-align: center;}
   .team .subTile p{font-size: 0.16rem;}
   .team .subTile span:after{display: block; content: ''; height:0.02rem; width:0.4rem; background: #002665; margin:0.04rem auto 0;}
   .team_box{padding:0 .1rem;}
   .team .team_box li{margin-bottom: 0.1rem; overflow: hidden;}
   .team .team_box img{width:45%; float: left;}
   .team .team_box .team_desc{width:53%; float: left; margin-left:2%;}
   .team .team_desc p{font-size: 0.12rem;}
   .contact .subTile{text-align: center; margin: 0.3rem auto 0.2rem;}
   .contact .subTile p{font-size: 0.16rem;}
   .contact .subTile p:before,.contact .subTile p:after{display: inline-block; content: ''; width:.82rem; height:.02rem; background:#002665; margin-top:.12rem;}
   .contact .subTile p:before{float: left;}
   .contact .subTile p:after{float: right;}
   .contact .contact_box{margin-bottom:.3rem; padding:0 .1rem;}
   .contact .contact_box .tie{font-weight: bold; margin:.12rem 0 0;}
   .contact .contact_box p{line-height:2em;}
   .contact .contact_box p span:nth-of-type(2n-1){width:.62rem; display: inline-block;}
</style>